<template>
    <ElForm class="register-form" ref="registerRef" :model="registerParam" :rules="registerRules">
        <h1>注册</h1>
        <ElFormItem prop="username">
            <ElInput placeholder="请输入账号" :prefix-icon="User" v-model="registerParam.username"></ElInput>
        </ElFormItem>
        <ElFormItem prop="password">
            <ElInput placeholder="请输入密码" show-password :prefix-icon="Lock" v-model="registerParam.password"></ElInput>
        </ElFormItem>
        <ElFormItem prop="email">
            <ElInput placeholder="输入邮箱" show-password :prefix-icon="Message" v-model="registerParam.email"></ElInput>
        </ElFormItem>
        <ElFormItem>
            <ElButton class="submit" type="primary">注册</ElButton>
        </ElFormItem>
    </ElForm>
</template>

<script setup lang="ts">
import { User,Lock, Message } from '@element-plus/icons-vue';
import { RegisterReq } from '@/interface/user';
import { reactive,ref } from 'vue';
import { FormInstance,FormRules } from "element-plus";

const registerParam:RegisterReq = reactive({
    username:'',
    password:'',
    email:''
})

const registerRef=ref<FormInstance>()

const registerRules:FormRules=reactive({
    username:[{required:true,message:'账号不能为空',trigger:'blur'}],
    password:[{required:true,message:'密码不能为空',trigger:'blur'},
            {required:true,message:'密码时6~20位,',min:6,max:20,trigger:'blur'}
            ],
    email:[{required:true,message:'邮箱不能为空',trigger:'blur'}],
})
</script>

<style lang="scss" scoped>
.register-form{
    grid-column: 1;
    grid-row: 1;
    pointer-events: all;
    h1{
        text-align: center;
    }
}
.submit{
    width: 120px;
    margin: auto;
}

</style>